<div class="container">
  <div class="row row-center" >
    <div  class="col-center">
      <div class="login-layout">
        <h3 class="login-title">login you system</h3>
        <form nz-form name="form" [formGroup]="validateForm" (ngSubmit)="onSubmit()">
          <nz-form-item>
            <nz-form-label [nzSpan]="4">name</nz-form-label>
            <nz-form-control
              nzHasFeedback
              [nzSpan]="20"
              nzErrorTip="pls input your username"
            >
              <nz-input-group [nzSuffix]="suffixUsername">
                <input
                  nz-input
                  placeholder="pls input username"
                  name="name"
                  formControlName="username"
                  required
                />
              </nz-input-group>
              <ng-template #suffixUsername>
                <i
                  nz-icon
                  class="ant-input-clear-icon"
                  nzTheme="fill"
                  nzType="close-circle"
                  *ngIf="validateForm.controls.username.value.length>0"
                  (click)="validateForm.controls.username.setValue('')"
                ></i>
              </ng-template>

            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-label [nzSpan]="4">pwd</nz-form-label>
            <nz-form-control
              nzHasFeedback
              [nzSpan]="20"
              nzErrorTip="pls input your pwd"
            >
              <nz-input-group [nzSuffix]="suffixPassword">
                <input
                  nz-input
                  name="password"
                  formControlName="password"
                  [type]="passwordVisible ? 'text' : 'password'"
                  placeholder="pls input your pwd"
                  required
                />
              </nz-input-group>
              <ng-template #suffixPassword>
                <i
                  nz-icon
                  class="ant-input-clear-icon"
                  nzTheme="fill"
                  nzType="close-circle"
                  *ngIf="validateForm.controls.password.value.length>0"
                  (click)="validateForm.controls.password.setValue('')"
                ></i>
                <i
                  nz-icon
                  [nzType]="passwordVisible ? 'eye-invisible' : 'eye'"
                  (click)="passwordVisible = !passwordVisible"
                ></i>
              </ng-template>
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-control [nzSpan]="20" [nzOffset]="4">
              <div nz-row class="login-form-margin">
                <div nz-col [nzSpan]="12">
                  <label nz-checkbox formControlName="remember">
                    <span>remember me</span>
                  </label>
                </div>
                <div nz-col [nzSpan]="12" style="text-align: right;">
                  <a class="login-form-forgot">forget pwd?</a>
                </div>
              </div>
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-control [nzSpan]="24" [nzOffset]="0" style="text-align: center;">
              <button
                type="submit"
                nz-button
                style="width: 100px;"
                nzType="primary"
              >login</button>
            </nz-form-control>
          </nz-form-item>
        </form>
      </div>
    </div>
  </div>
</div>

